<template>
  <div class="resource-tag-wrap">
    <div :style="{ 'background': returnColor }" class="resource-color" />
    <div class="resource-text"><slot /></div>
    <div class="close-btn" @click="close"><i class="el-icon-close" /></div>
  </div>
</template>
<script>
import { dynamicColor } from '@/utils/ventureColorCfg';
export default {
  name: 'ResourceTag',
  props: {
    item: {
      type: Object,
      default: () => null
    }
  },
  computed: {
    returnColor() {
      if (this.item.id in dynamicColor) {
        return dynamicColor[this.item.id];
      } else {
        return '#31CC9C';
      }
    }
  },
  methods: {
    close() {
      this.$emit('close', this.item);
    }
  }
};
</script>
<style lang="scss" scoped>
.resource-tag-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 110px;
  height:24px;
  padding: 0 6px;
  margin-bottom: 12px;
  border-radius: 2px;
  background:rgba(255,255,255,1);
  border:1px solid #ddd;
  .resource-color {
    margin-right: 6px;
    // background: #31CC9C;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .resource-text {
    flex: 1;
    margin-right: 6px;
    font-size: 14px;
    color: #333333;
  }
  .close-btn {
    cursor: pointer;
    font-size: 14px;
    color: #999999;
  }
}
</style>
